import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image, /*Switch*/ } from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import {CART_PARAMS_KEY, ORDER_DATA_KEY} from '../../../redux/constants'

import SDButton from '../../../comps/sd-button'

import './index.less'

import MoreIcon from '../../../images/ic_next.png'

type IOrderPreviewPageState = {
  mainIsLoading: boolean,
  btnIsLoading: boolean,
  orderData: any
}

export default class OrderPreviewPage extends Component<{}, IOrderPreviewPageState> {

  constructor () {
    super(...arguments)
    this.state = {
      mainIsLoading: true,
      btnIsLoading: false,
      orderData: {}
    }
  }

  config: Config = {
    navigationBarTitleText: '提交订单'
  }

  pageParam: any[] = []

  componentDidMount () {
    let pageParam = Taro.getStorageSync(CART_PARAMS_KEY)
    Taro.removeStorageSync(CART_PARAMS_KEY)
    this.pageParam = pageParam
    this.fetchData()
  }

  fetchData = async () => {
    let pageParam = this.pageParam
    let orderData = {}
    try {
      orderData = await SDUtils.doPost('/wxmini/order/preview', {
        orderItems: pageParam
      })
    } catch (e) {
      SDUtils.showMsg(e)
    } finally {
      this.setState({
        orderData: orderData,
        mainIsLoading: false
      })
    }
  }

  render () {
    const { mainIsLoading, orderData, btnIsLoading } = this.state
    const { statusBarHeight } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0
    return (
      <SDBody sd-class='container' loading={mainIsLoading}>
        <View className="section-store">
          <View className="store-item">
            <View className="left">
              <View className="item">收</View>
              <View className="item">货</View>
              <View className="item">门</View>
              <View className="item">店：</View>
            </View>
            <View className="right right-dark">{orderData.receiverName}</View>
          </View>
          <View className="store-item">
            <View className="left">
              <View className="item">地</View>
              <View className="item">址：</View>
            </View>
            <View className="right">{`${orderData.provinceName} ${orderData.cityName} ${orderData.countyName} ${orderData.receiverAddress}`}</View>
          </View>
          <View className="store-item">
            <View className="left">
              <View className="item">电</View>
              <View className="item">话：</View>
            </View>
            <View className="right">{orderData.receiverPhone}</View>
          </View>
          <View className="store-item">
            <View className="left">
              <View className="item">联</View>
              <View className="item">系</View>
              <View className="item">人：</View>
            </View>
            <View className="right">{orderData.receiverName}</View>
          </View>
        </View>
        <View className="section-goods">
          <View className="header">
            <View className="left">
              <View className="item">商品：{orderData.productTotalQuantity}</View>
              <View className="item">规格：{orderData.skuTotalQuantity}</View>
              <View className="item">总数: {orderData.totalQuantity}</View>
            </View>
            <View className="right" onClick={this.gotoMenuDetailPage}>
              <View className="title">查看明细</View>
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
          <View className="sku-list">
            {
              orderData.itmes.productViewVo.map((item, index) => {
                return (
                  <View className="sku-item" key={index}>
                    <Image className="img" src={item.image || ''}></Image>
                    <View className="tips-content">
                      <View className="title">{item.buyCount}个</View>
                    </View>
                  </View>
                )
              })
            }
          </View>
          <View className="sku-cell__list">
            {/*<View className="sku-cell__item border-bottom_1px border-top_1px">*/}
              {/*<View className="title">1000减20</View>*/}
              {/*<Switch style={`transform: scale(${windowWidth / 375 > 1.0 ? 1.0 : windowWidth / 375});transform-origin: 100% 50%;`} />*/}
            {/*</View>*/}
            {/*<View className="sku-cell__item border-bottom_1px">*/}
              {/*<View className="title">可用积分50</View>*/}
              {/*<Switch style={`transform: scale(${windowWidth / 375 > 1.0 ? 1.0 : windowWidth / 375});transform-origin: 100% 50%;`} />*/}
            {/*</View>*/}
            <View className="sku-cell__item border-bottom_1px border-top_1px">
              <View className="title">商品总金额</View>
              <View className="sub-title">{SDUtils.formatPrice(orderData.finalTotalAmount)}</View>
            </View>
            {/*<View className="sku-cell__item border-bottom_1px">*/}
              {/*<View className="title">黄金会员享受8折</View>*/}
              {/*<View className="sub-title">￥1040.00</View>*/}
            {/*</View>*/}
            {/*<View className="sku-cell__item border-bottom_1px">*/}
              {/*<View className="title">优惠金额</View>*/}
              {/*<View className="sub-title">- ¥20.00</View>*/}
            {/*</View>*/}
            <View className="sku-cell__item">
              <View className="title">应付款总金额</View>
              <View className="sub-title price">{SDUtils.formatPrice(orderData.finalTotalAmount)}</View>
            </View>
          </View>
        </View>
        <View className="section-tips">
          <View className="header">
            <View className="title">温馨提示</View>
          </View>
          <View className="list">
            <View className="item">
              <View className="left">客服电话：</View>
              <View className="right">021-1234567</View>
            </View>
            <View className="item">
              1.微信支付使用储蓄卡支付最大可支持单笔5万微信支付使用储蓄卡支付最大可支持单笔5万
            </View>
            <View className="item">
              2.可联系客服线下转账支付
            </View>
          </View>
        </View>

        <View style='height:118rpx;'></View>
        <View className="fixed-bottom border-top_1px">
          <View className="bottom-bar">
            <View className="left">
              <View className="tips">合计：</View>
              <View className="price">{SDUtils.formatPrice(orderData.finalTotalAmount)}</View>
            </View>
            <SDButton height={98} sd-class='btn-payment' loading={btnIsLoading} onClick={this.execPayment}>去支付</SDButton>
          </View>
          <View style={`height: ${bottomH}px;`}></View>
        </View>
      </SDBody>
    )
  }

  gotoMenuDetailPage = () => {
    const { orderData } = this.state
    Taro.setStorageSync(ORDER_DATA_KEY, orderData)
    SDUtils.jumpTo('/pages/order/menu/index')
  }

  execPayment = () => {
    let btnIsLoading = this.state.btnIsLoading
    if (btnIsLoading) { return }
    this.setState({
      btnIsLoading: true
    },async() => {
      try {
        let resp = await SDUtils.doPost('/wxmini/order', {
          orderItems: this.pageParam
        })
        SDUtils.jumpTo('/pages/order/result/index', {orderId: resp.orderId})
        // TODO. 支付
      } catch (e) {
        // SDUtils.jumpTo('/pages/order/result/index', {orderId: resp.orderId})
        SDUtils.showMsg(e)
      } finally {
        this.setState({
          btnIsLoading: false
        })
      }
    })
  }
}
